<template>
  <div class="self_table">
    <el-table :data="tableData" style="" v-loading="loading" stripe @selection-change="handleSelectionChange"
      :header-cell-class-name="'headercellstyle'" :cell-class-name="'cellstyle'">
      <template slot="empty">
        <div class="no_data_area">
          <div class="no_data"></div>
          <div class="no_staff">
            <span>暂无相关数据</span>
          </div>
        </div>
      </template>
      <el-table-column type="selection" width="55" v-if="type"></el-table-column>
      <template v-for="(item, index) in columns">
        <el-table-column :key="'%' + index" :show-overflow-tooltip="true" :prop="item.prop" :label="item.label"
          :width="item.width" :min-width="item.minWidth" :sortable="item.sortable" :fixed="item.fixed" align="center">
          <template slot-scope="scope">
            <!-- <template v-if="item.prop == 'status'">
              <span style="width: 50px; height: 50px; margin: 0 auto">
                <el-switch :value="scope.row['status'] == '0' ? false : true" @change="tabrelease(scope.row)">
                </el-switch>
              </span>
            </template> -->
            <template v-if="item.prop == 'status'">
              <span style="width: 50px; height: 50px; margin: 0 auto">
                {{ scope.row['status'] == '0' ? '停用' : '正常' }}
              </span>
            </template>
            
            <template v-else-if="item.prop == 'sex'">
              <span style="width: 50px; height: 50px; margin: 0 auto">
                {{ scope.row['sex'] == '0' ? '男' : '女' }}
              </span>
            </template>
            <template v-else>
              {{ scope.row[item.prop] != null ? scope.row[item.prop] : "" }}
            </template>
          </template>
        </el-table-column>
      </template>
      <el-table-column label="操作" :width="btnlong" align="center">
        <template slot-scope="scope">
          <slot name="header" v-bind:date="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
    <!-- 是否调用分页 -->
    <div class="com_page" v-if="pageObj && pageObj.total">
      <el-pagination layout="total, prev, pager, next, jumper" :page-size="pageObj.size" :total="pageObj.total"
        :current-page="pageObj.currentPage" @current-change="handleCurrentChange" background>
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    //   表头
    columns: {
      type: Array,
      default: () => [],
    },
    //   表格数据
    tableData: {
      type: Array,
      default: () => [],
    },
    // 加载展示
    loading: {
      type: Boolean,
      default: false,
    },
    // 高度
    height: {
      type: String,
      default: () => "70vh",
    },
    // 分页
    pageObj: {
      type: Object,
      default: function () {
        return {
          size: 10,
          total: 0,
          currentPage: 1,
        };
      },
    },
    // 是否多选
    type: {
      type: Boolean,
      default: () => false,
    },
    // 按钮长度
    btnlong: {
      type: String,
      default: "",
    },
  },
  created() {
  },
  methods: {
    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", val);
    },
    handleSelectionChange(val) {
      this.$emit("handleSelectionChange", val);
    },
    tabrelease(val) {
      this.$emit("switch", val);
    },
  },
};
</script>

<style lang='less' scoped>
.el-table {
  width: 100%;

  /deep/ .el-table__body-wrapper {
    overflow: hidden;
    position: relative;
    height: 600px;
    overflow-y: auto;
  }
  /* 整个滚动条 */
  ::-webkit-scrollbar {
    /* 对应纵向滚动条的宽度 */
    width: 5px;
    /* 对应横向滚动条的宽度 */
    height: 10px;
    
  }

  /* 滚动条上的滚动滑块 */
  ::-webkit-scrollbar-thumb {
    background-color: #0099ff;
    border-radius: 32px;
    height: 20px !important;
  }

  /* 滚动条轨道 */
  ::-webkit-scrollbar-track {
    background-color: #ffffff;
    border-radius: 32px;
  }
}

.com_page {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.btn_list {
  display: flex;
  // justify-content: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}

.grey_color {
  color: #333;
}

/deep/::-webkit-scrollbar {
  display: block !important;
  height: 10px;
  width: 6px;
  background-color: #ddd;
}

.no_data_area {
  color: #A5B4DA;
  font-size: 14px;
  width: 100%;
  text-align: center;
  margin-top: 5%;
}

.no_data_area .no_data {
  width: 100px;
  height: 100px;
  background-image: url("~@/assets/image/no_data.png");
  background-size: 100% 100%;
  margin: 0 auto;
}

.no_staff {
  line-height: 20px;
  margin-bottom: 10px;
}
</style>